import React, { PureComponent } from 'react'
import { TopicWrapper, TopicItem } from '../style';
import { connect } from 'react-redux'

class Topic extends PureComponent {
  render () {
    const { list } = this.props
    return (
      <div>
        <TopicWrapper >
          {list.map((item) => {
            return (
              <TopicItem key={item.get('id')}>
                <img src={item.get('imgUrl')} alt="img" className="topic-pic" />
                {item.get('title')}
              </TopicItem>
            )
          })}

        </TopicWrapper>
      </div>
    )
  }
}

const mapState = (state) => {
  return {
    list: state.getIn(['home', 'topicList'])
  }
}

export default connect(mapState, null)(Topic)
